<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <ol class="breadcrumb">
        <li><a href="#">学生成绩管理系统</a></li>
        <li><a href="QueryScoreStudent.html">成绩管理</a></li>
        <li>查询成绩</li>
    </ol>
    <h3 class="page-header">成绩列表</h3>



    <table class="table table-striped table-bordered">
        <tr>
            <th>编号</th>
            <th>学生学号</th>
            <th>学生姓名</th>
            <th>课程号</th>
            <th>课程名</th>
            <th>成绩</th>
        </tr>
        <tr v-for="(score,index) in dataList">
            <td>{{score.scId}}</td>
            <td>{{score.sno}}</td>
            <td>{{score.sname}}</td>
            <td>{{score.cno}}</td>
            <td>{{score.cname}}</td>
            <td>{{score.score}}</td>
        </tr>

    </table>
    <form class="navbar-form navbar-left">
        <div class="form-group">
            <span>详细查询：</span>
            <input type="text" class="form-control" placeholder="请输入学号" id="selectSno">
        </div>
        <button type="button" class="btn btn-default" id="select" @click="queryScoreSno()">按学号搜索</button>
    </form>
    <form class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入课程号" id="selectCno">
        </div>
        <button type="button" class="btn btn-default" id="select2" @click="queryScoreCno()">按课程号搜索</button>
    </form>
    <div class="row">
        <div class="col-sm-offset-8 col-sm-4">
            <a href="FeedbackScore.html" class="btn btn-success btn-block" @click="Feedback()">成绩修改申请</a>
        </div>
    </div>
</div>
<script src="js/vue/vue2.5.js"></script>
<script src="js/vue/axios.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/layer/layer.js"></script>
<script>

    new Vue({
        el:'.container',
        data:{
            dataList:[
            ],
            sno:'',
            cno:''
        },
        methods:{
            //查询成绩列表
            queryScore(){
                axios.get('/score/query')
                    .then(resp =>{//请求成功的回调函数
                        this.dataList = resp.data;
                    })
            },
            //通过学生号查询
            queryScoreSno(){
                const selectSno = document.getElementById('selectSno');
                this.sno = selectSno.value;
                axios.get('/score/query2',{params:{sno: this.sno}})
                    .then(resp =>{
                        if(resp.data == '') {
                            layer.msg('无此学号！请重新输入！');
                        }else{
                            this.dataList = resp.data;
                            layer.msg('查询成功！');
                        }

                    })
            },
            //通过课程号查询
            queryScoreCno(){
                const selectCno = document.getElementById('selectCno');
                this.cno = selectCno.value;
                axios.get('/score/query3',{params:{cno: this.cno}})
                    .then(resp =>{
                        if(resp.data == '') {
                            layer.msg('无此学号！请重新输入！');
                        }else{
                            this.dataList = resp.data;
                            layer.msg('查询成功！');
                        }

                    })
            },
            Feedback() {
                location.href = 'FeedbackScore.html';
            }
        },
        //当页面组件渲染完毕自动调用
        mounted(){
            this.queryScore();
        }

    });
</script>
</body>
</html>